<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="admin/order">订单管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 style="margin: 20px 0;">订单详情</h3>

    <el-table :data="tbOrderListData" border style="width: 100%">
      <el-table-column prop="orderId" label="订单ID" width="100px" align="center"></el-table-column>
      <el-table-column prop="orderNum" label="订单编号" width="150" align="center"></el-table-column>
      <el-table-column prop="userId" label="用户ID" width="100px" align="center"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="100px" align="center"></el-table-column>
      <el-table-column prop="totalMoney" label="订单总金额" width="100px" align="center"></el-table-column>
      <el-table-column prop="deliverMoney" label="运费" width="100px" align="center"></el-table-column>
      <el-table-column prop="userName" label="收货人姓名" width="100px" align="center"></el-table-column>
      <el-table-column prop="userPhone" label="收货人电话" width="120px" align="center"></el-table-column>
      <el-table-column prop="userAddress" label="收货人地址" width="200px" align="center"></el-table-column>
      <el-table-column prop="orderRemarks" label="订单备注" width="200" align="center"></el-table-column>

      <el-table-column prop="isPlay" label="是否支付" width="100" align="center">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.enable"
              @change="handleChangeEnable(scope.$index, scope.row.orderId, scope.row.enable)"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#999">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit" size="mini" type="primary"
                     @click="handleEdit(scope.$index,scope.row) "></el-button>
          <el-dialog
              title="编辑订单列表"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose">
            <div style="margin: 20px"></div>
            <el-form :label-position="labelPosition"  label-width="80px" :model="formOrder">
              <el-form-item label="订单id" >
                <el-input v-model="formOrder.orderId" :disabled="true" ></el-input>
              </el-form-item>

              <el-form-item label="订单编号" >
                <el-input v-model="formOrder.orderNum"></el-input>
              </el-form-item>

              <el-form-item label="用户id" >
                <el-input v-model="formOrder.userId"></el-input>
              </el-form-item>

              <el-form-item label="订单状态"  >
                <el-input v-model="formOrder.orderStatus"></el-input>
              </el-form-item>

              <el-form-item label="运费" >
                <el-input v-model="formOrder.deliverMoney"></el-input>
              </el-form-item>

              <el-form-item label="订单总金额" >
                <el-input v-model="formOrder.totalMoney"></el-input>
              </el-form-item>

              <el-form-item label="收货人名称" >
                <el-input v-model="formOrder.userName"></el-input>
              </el-form-item>

              <el-form-item label="收货人地址" >
                <el-input v-model="formOrder.userAddress"></el-input>
              </el-form-item>

              <el-form-item label="收货人电话" >
                <el-input v-model="formOrder.userPhone"></el-input>
              </el-form-item>

              <el-form-item label="订单备注" >
                <el-input v-model="formOrder.orderRemarks"></el-input>
              </el-form-item>

              <el-form-item label="是否支付" >
                <el-switch
                    v-model="formOrder.isPay"
                    active-value="1"
                    inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#999">
                </el-switch>
              </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">

              <el-button type="primary" @click="confirm">确定修改</el-button>
              <el-button @click="dialogVisible = false">取消修改</el-button>
            </span>

          </el-dialog>



          <el-button circle icon="el-icon-delete" size="mini" type="danger"
                     @click="openDeleteConfirm(scope.row.orderId)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tbOrderListData: [],
      dialogVisible:false,
      labelPosition:'right',
      formOrder:{
        orderId: '',
        orderNum: '',
        userId: '',
        orderStatus: '',
        deliverMoney: '',
        totalMoney: '',
        userName: '',
        userAddress:'',
        userPhone:"",
        orderRemarks: '',
        isPay: '',
      }
    }
  },
  methods: {
    openDeleteConfirm(orderId) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(orderId);
      }).catch(() => {
      });
    },
    handleEdit(index,row) {
      this.orderIdIndex = index;
      console.log(row.orderId)
      this.formOrder = {
        orderId: row.orderId,
        orderNum: row.orderNum,
        userId: row.userId,
        orderStatus: row.orderStatus,
        deliverMoney: row.deliverMoney,
        totalMoney: row.totalMoney,
        userName: row.userName,
        userAddress: row.userAddress,
        userPhone: row.userPhone,
        orderRemarks: row.orderRemarks,
        isPay: row.isPay,
      };
      this.dialogVisible = true;
    },

    confirm(){
      console.log(this.formOrder.orderId)
      console.log(this.formOrder.orderNum)
      console.log(this.formOrder.userId)
      console.log(this.formOrder.orderStatus)
      console.log(this.formOrder.deliverMoney)
      console.log(this.formOrder.totalMoney)
      console.log(this.formOrder.userName)
      console.log(this.formOrder.userAddress)
      console.log(this.formOrder.userPhone)
      console.log(this.formOrder.orderRemarks)
      console.log(this.formOrder.isPay)
      var that = this
      let url = 'http://localhost:8888/tbOrders/update-by-orderId';
      this.axios.post(url,this.formOrder).then((response) => {
        let json = response.data;
        if (json.code == 2000){
          this.$message({
            message:'修改订单成功！',
            type:'success'
          });
          that.loadOrders()
          this.dialogVisible = false;
        }else {
          this.$message.error(response.data.message)
        }
      })
    },

    handleClose(done){
      this.$confirm('确认关闭？')
          .then(_=>{
            done();
          }).catch(_=> {});
    },



    handleDelete(orderId) {
      console.log('将删除orderId=' + orderId + "的订单数据……");
      let url = 'http://localhost:8888/tbOrders/'+orderId+'/delete';
      this.axios
          // .create({headers: {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let json = response.data;
        if (json.code == 2000) {
          this.$message({
            message: '删除订单成功！',
            type: 'success'
          });
        } else {
          this.$message.error(response.data.message);
        }
        this.loadOrders();
      })
    },
    handleChangeEnable(i, orderId, toState) {
      let enableText = ['禁用', '启用'];
      let originState = (toState + 1) % 2;
      this.$message.error('尝试将orderId=' + orderId + '的品牌状态从【' + enableText[originState] + '】改为【' + enableText[toState] + '】，但是，此功能尚未实现！');

      setTimeout(() => {
        this.tbOrderListData[i].enable = originState;
      }, 200);
    },
    loadOrders: function () {
      console.log('loadOrders()');
      let url = 'http://localhost:8888/tbOrders/list';
      console.log('url = ' + url);
      this.axios
          // .create({headers: {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let json = response.data;
        if (json.code == 2000) {
          // let list = json.data;
          // for (let i = 0; i < list.length; i++) {
          //   console.log(list[i]);
          // }
          this.tbOrderListData = json.data;
        } else {
          this.$message.error(response.data.message);
        }
      });
    }
  },
  created() {
    // created >>> 已创建，将在mounted、显示页面之前执行
    console.log('vue created');
  },
  mounted() {
    // mounted >>> 已挂载，将在created之后、显示页面之前执行
    console.log('vue mounted');
    this.loadOrders();
  }
}
</script>

<style scoped>

</style>
